<template>
  <div class="top">
    <div class="option"><label><h3>欢迎来到知乎爬虫系统</h3></label></div>
    <div class="option"><el-button  type="primary" @click="toCharts">柱状图</el-button></div>
    <div class="option"><el-button  type="primary" @click="toPie">饼图</el-button></div>
    <div class="option"><el-button  type="primary" @click="toTable">话题内容</el-button></div>
    <div class="option"><el-button  type="primary" @click="toReal">实际热度</el-button></div>
    <div class="option">
      <el-date-picker v-model="currentDate" type="date" format="yyyy 年 MM 月 dd 日"
                      value-format="yyyy-MM-dd" :default-value="currentDate" style="width:200px">
      </el-date-picker>
    </div>
    <div class="option">
      <el-dropdown @command="handleCommand">
        <el-button type="primary">
          {{$store.state.username}}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>

        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="updatePassword">修改密码</el-dropdown-item>
          <el-dropdown-item command="exit">退出系统</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      avatarUrl:
        this.$uploadPath +
        "/user/getAvatar?username=" +
        this.$store.state.username,
      currentDate: ""
    };
  },
  methods: {
    // 跳转到游戏界面
    toCharts: function() {
      this.$router.push({ path: "/charts" }).catch(err => {
        err;
      });
    },
    toPie: function() {
      this.$router.push({ path: "/pie" }).catch(err => {
        err;
      });
    },
    toTable: function() {
      this.$router.push({ path: "/table" }).catch(err => {
        err;
      });
    },
    toReal: function () {
      this.$router.push({ path: "/real" }).catch(err => {
        err;
      });
    },
    // 点击下拉列表时触发事件
    handleCommand: function(command) {
      if (command === "updatePassword") {
        this.$router.push({ path: "/user/updatePassword" }).catch(err => {
          err;
        });
      }
      if (command === "exit") {
        this.$router.push({ path: "/login" }).catch(err => {
          err;
        });
      }
    }
  },
  computed: {},
  watch: {
    currentDate(newValue, oldValue) {
      this.$store.commit('changeCurrentData', this.currentDate);
    }
  },
  mounted() {
    this.currentDate = this.getDate();
  }
};
</script>

<style>
.top {
  width: 100%;
  height: 100%;
}
.top .option, .el-avatar {
  margin-top: 20px;
  float: left;
  margin-left: 20px;
}
/* .top .el-avatar {
  margin-top: 20px;
} */
</style>
